<template>
  <view class="history-list-container">
    <!-- 这里写你的页面内容 -->
   
      <!-- 面试宝典区块 -->
      <view class="qa-card">
      <view class="qa-header">
        <view class="qa-title">
          <uv-icon name="list-dot" color="#4ECDC4" size="32" />
          <text class="title-text">面试宝典</text>
        </view>
        <view class="qa-more" @click="viewAllQuestions">
          查看全部
          <uv-icon name="arrow-right" color="#4ECDC4" size="16" />
        </view>
      </view>

      <view class="qa-filters">
        <uni-data-select
          class="filter-pill"
          v-model="category"
          :localdata="categoryOptions"
          placeholder="分类"
          @change="selectPosition"
        ></uni-data-select>
        <uni-data-select
          class="filter-pill"
          v-model="difficulty"
          :localdata="difficultyOptions"
          placeholder="难度"
          @change="selectPosition"
        ></uni-data-select>
        <uni-data-select
          class="filter-pill"
          v-model="frequency"
          placeholder="高频"
          :localdata="frequencyOptions"
          @change="selectPosition"
        ></uni-data-select>
        <uni-data-select
          class="filter-pill"
          placeholder="易错"
          v-model="mistake"
          :localdata="mistakeOptions"
          @change="selectPosition"
        ></uni-data-select>
      </view>

      <view class="qa-list">
        <view class="qa-item" v-for="item in qaList" :key="item.id">
          <view class="qa-item-title">
            <uv-icon name="question-circle" color="#4ECDC4" size="24" />
            <text class="qa-item-text">{{ item.question }}</text>
          </view>
          <view class="qa-tags">
            <view class="qa-tag">{{ item.category }}</view>
            <view class="qa-tag">{{ item.difficulty }}</view>
            <view class="qa-tag" v-if="item.isHighFreq">高频</view>
            <view class="qa-tag" v-if="item.isErrorProne">易错</view>
          </view>
        </view>
      </view>

      <uv-button type="primary" shape="circle" class="qa-btn"
        >开始答题</uv-button
      >
    </view>
    <!-- 演练历史区块 -->
    <view class="history-card">
      <view class="history-header">
        <view class="history-title">
          <uv-icon name="reload" color="#4ECDC4" size="32" />
          <text class="history-title-text">演练历史</text>
        </view>
        <view class="history-more" @click="viewAllHistory">
          查看全部
          <uv-icon name="arrow-right" color="#4ECDC4" size="16" />
        </view>
      </view>

      <view class="history-list">
        <view class="history-item" v-for="item in historyList" :key="item.id">
          <view class="history-item-main">
            <view>
              <view class="history-date">{{ item.date }}</view>
              <view class="history-name">{{ item.name }}</view>
            </view>
            <view class="history-item-side">
              <view class="history-star">
                <uv-icon
                  :name="item.isFav ? 'star-fill' : 'star'"
                  :color="item.isFav ? '#ffaa00' : '#e5e5e5'"
                  size="32"
                  @click="toggleFav(item.id)"
                />
              </view> </view
          ></view>

          <view class="history-item-main">
            <span class="history-tag">{{ item.tag }}</span>
            <view class="history-score">
              <uv-icon name="star-fill" color="#ffaa00" size="18" />
              <text>{{ item.score }}分</text>
              <view class="history-delete">
                <uv-icon
                  name="trash"
                  color="#d1d1d1"
                  size="28"
                  @click="deleteHistory(item.id)"
                />
              </view>
            </view>
          </view>
        </view>
      </view>

      <button class="history-btn" @click="viewAllHistory">查看更多历史</button>
      <!-- 我的简历弹窗 -->
 
    </view>
    <uv-tabbar :value="tabValue" @change="tabChange" activeColor="#4ECDC4" style="width: 100%;">
		<uv-tabbar-item text="模拟面试" icon="play-circle"></uv-tabbar-item>
		<uv-tabbar-item text="演练面试" icon="reload"></uv-tabbar-item>
		<uv-tabbar-item text="面试宝典" icon="account"></uv-tabbar-item>
	</uv-tabbar>
  </view>
</template>

<script>
export default {
  name: 'HistoryList',
  data() {
    return {
        category: '',
      difficulty: '',
      frequency: '',
      mistake: '',
      categoryOptions: [
        { text: '技术', value: 'tech' },
        { text: '产品', value: 'product' },
        { text: '设计', value: 'design' }
      ],
      difficultyOptions: [
        { text: '初级', value: 'junior' },
        { text: '中级', value: 'middle' },
        { text: '高级', value: 'senior' }
      ],
      frequencyOptions: [
        { text: '非常高', value: 'very_high' },
        { text: '较高', value: 'high' },
        { text: '一般', value: 'normal' }
      ],
      mistakeOptions: [
        { text: '极易出错', value: 'very_mistake' },
        { text: '常见出错', value: 'common_mistake' }
      ],
      qaList: [
        {
          id: 1,
          question: '如何解决前端性能优化问题？',
          category: '前端开发',
          difficulty: '中级',
          isHighFreq: true,
          isErrorProne: false
        },
        {
          id: 2,
          question: '如何评估一个产品的成功与否？',
          category: '产品经理',
          difficulty: '高级',
          isHighFreq: false,
          isErrorProne: false
        },
        {
          id: 3,
          question: '请描述你的设计流程',
          category: 'UI设计',
          difficulty: '初级',
          isHighFreq: true,
          isErrorProne: true
        }
      ],
      historyList: [
        {
          id: 1,
          date: '2023-08-15 14:30',
          name: '前端开发工程师面试',
          tag: '互联网/IT',
          score: 86,
          isFav: true
        },
        {
          id: 2,
          date: '2023-08-10 10:15',
          name: '产品经理面试',
          tag: '互联网/IT',
          score: 78,
          isFav: false
        }
      ],
      tabValue: 1,
      // 你的数据
    }
  },
  computed: {
    // 你的计算属性
  },
  methods: {
    // 你的方法
    viewAllQuestions() {
      uni.navigateTo({ url: '/pages/questionBank' })
    },
    viewAllHistory() {
      uni.navigateTo({ url: '/pages/practiceHistory' })
    },
    toggleFav(id) {
      const item = this.historyList.find((h) => h.id === id)
      if (item) {
        item.isFav = !item.isFav
      }
    },
    deleteHistory(id) {
      uni.showModal({
        title: '确认删除',
        content: '确定要删除这条历史记录吗？',
        success: (res) => {
          if (res.confirm) {
            this.historyList = this.historyList.filter((h) => h.id !== id)
          }
        }
      })
    },
    tabChange(index) {
      this.tabValue = index
      if(index === 0){
        uni.navigateTo({ url: '/pages/interview' })
      }else if(index === 1){
        uni.navigateTo({ url: '/pages/historyList' })
      }else if(index === 2){
        uni.navigateTo({ url: '/pages/questionBank' })
      }
    }
  },
  created() {
    // 组件创建时
  },
  mounted() {
    // 组件挂载后
  }
}
</script>

<style lang="scss" scoped>
.history-list-container {
  background: #f7fafc;
  min-height: 100vh;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  .qa-card {
  background: #fff;
  border-radius: 18rpx;
  box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.08);
  padding: 32rpx 24rpx 24rpx 24rpx;
  margin: 32rpx 0;
  width: 92%;
  box-sizing: border-box;
}

.qa-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24rpx;
  .qa-title {
    display: flex;
    align-items: center;
    .title-text {
      font-size: 30rpx;
      font-weight: bold;
      margin-left: 12rpx;
    }
  }
  .qa-more {
    font-size: 24rpx;
    color: #4ecdc4;
    display: flex;
    align-items: center;
  }
}

.qa-filters {
  display: flex;
  gap: 16rpx;
  margin-bottom: 24rpx;
  .filter-pill {
    ::v-deep .uni-select {
      background: #e6f7f6 !important;
      border: none !important;
      font-size: 20rpx !important;
      border-radius: 32rpx;
      border: 1px solid #4ecdc4 !important;
      padding: 2rpx 10rpx !important;
      font-size: 20rpx !important;
    }
  }
}

.qa-list {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
  margin-bottom: 24rpx;
}

.qa-item {
  background: #fff;
  border-radius: 12rpx;
  border: 1px solid #e0f8f5;
  border-left: 4px solid #4ecdc4;
  padding: 18rpx 24rpx;
  .qa-item-title {
    display: flex;
    align-items: center;
    .qa-item-text {
      font-size: 26rpx;
      font-weight: 500;
      margin-left: 12rpx;
    }
  }
  .qa-tags {
    display: flex;
    gap: 12rpx;
    margin-top: 12rpx;
    .qa-tag {
      font-size: 22rpx;
      color: #888;
      border: 1px solid #e0e0e0;
      padding: 4rpx 10rpx;
      border-radius: 8rpx;
    }
  }
}

.qa-btn {
  width: 100%;
  border-radius: 10rpx;
  font-weight: bold;
  font-size: 28rpx;
  height: 80rpx;
}
.history-card {
  background: #fff;
  border-radius: 18rpx;
  box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.08);
  padding: 32rpx 24rpx 24rpx 24rpx;
  margin: 32rpx 0;
  width: 92%;
  box-sizing: border-box;
}

.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24rpx;
}
.history-title {
  display: flex;
  align-items: center;
}
.history-title-text {
  font-size: 30rpx;
  font-weight: bold;
  margin-left: 12rpx;
}
.history-more {
  font-size: 24rpx;
  color: #4ecdc4;
  display: flex;
  align-items: center;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
  margin-bottom: 24rpx;
}

.history-item {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-direction: column;
  background: #fff;
  border-radius: 14rpx;
  box-shadow: 0 2rpx 8rpx rgba(78, 205, 196, 0.06);
  border-left: 8rpx solid #4ecdc4;
  padding: 22rpx 18rpx 22rpx 22rpx;
  position: relative;
}

.history-item-main {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.history-date {
  font-size: 22rpx;
  color: #888;
  margin-bottom: 6rpx;
}
.history-name {
  font-size: 26rpx;
  font-weight: 500;
  margin-bottom: 8rpx;
}
.history-tag {
  font-size: 22rpx;
  background: #e6f7f6;
  color: #4ecdc4;
  padding: 4rpx 10rpx;
  border-radius: 8rpx;
  display: inline-block;
  width: auto;
  white-space: nowrap;
}

.history-item-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  margin-left: 18rpx;
  gap: 12rpx;
}
.history-star {
  margin-bottom: 8rpx;
}
.history-score {
  display: flex;
  align-items: center;
  gap: 6rpx;
  font-size: 24rpx;
  color: #ffaa00;
  margin-bottom: 8rpx;
}
.history-delete {
  margin-top: 8rpx;
}

.history-btn {
  width: 100%;
  border-radius: 32rpx;
  background: #fff;
  color: #4ecdc4;
  border: 2rpx solid #4ecdc4;
  font-size: 26rpx;
  font-weight: 500;
  height: 80rpx;
  margin-top: 8rpx;
  margin-bottom: 0;
  box-shadow: none;
}
}
</style>
